<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>数据集列表</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    h1 {
      margin-bottom: 20px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 10px;
      border: 1px solid #ccc;
      text-align: left;
    }

    th {
      background-color: #f0f0f0;
    }

    a {
      color: blue;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>可用数据集列表</h1>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>类型</th>
        <th>描述</th>
        <th>数据地址 (dataInfo)</th>
      </tr>
    </thead>
    <tbody id="dataset-body">
      <tr><td colspan="4">加载中...</td></tr>
    </tbody>
  </table>

  <script>
    fetch('data/datasets.json')
      .then(response => response.json())
      .then(datasets => {
        const tbody = document.getElementById('dataset-body');
        tbody.innerHTML = '';

        datasets.forEach(ds => {
          const tr = document.createElement('tr');

          const nameLink = document.createElement('a');
          nameLink.textContent = ds.name;
          nameLink.href = `imagelist.html?datasetname=${encodeURIComponent(ds.name)}`;
          nameLink.target = '_blank';

          const nameTd = document.createElement('td');
          nameTd.appendChild(nameLink);

          const typeTd = document.createElement('td');
          typeTd.textContent = ds.dataType;

          const commentTd = document.createElement('td');
          commentTd.textContent = ds.comment || '';

          const infoTd = document.createElement('td');
          const infoLink = document.createElement('a');
          infoLink.href = ds.dataInfo;
          infoLink.textContent = ds.dataInfo;
          infoLink.target = '_blank';
          infoTd.appendChild(infoLink);

          tr.appendChild(nameTd);
          tr.appendChild(typeTd);
          tr.appendChild(commentTd);
          tr.appendChild(infoTd);

          tbody.appendChild(tr);
        });
      })
      .catch(err => {
        console.error('加载数据集失败:', err);
        const tbody = document.getElementById('dataset-body');
        tbody.innerHTML = '<tr><td colspan="4">加载失败</td></tr>';
      });
  </script>
</body>
</html>
